<template>
    <div class="leftBottom">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
                <span>
                  <icon name="chart-bar" class="text-icon"></icon>
                </span>
                <div class="d-flex">
                    <span class="fs-xl text mx-2">影视人才列表</span>
                    <dv-decoration-3 class="dv-dec-3"/>
                </div>
            </div>
            <div class="scrollTit">
                <span class="item1">#</span>
                <span class="item2 text-l">姓名</span>
                <span class="item2 text-l">当前剧组</span>
                <span class="item3 text-r">出生年月</span>
            </div>
            <vue-seamless-scroll :data="dataList" :class-option="classOption" class="scrollContent">
                <div class="scrollList" v-for="(item, i) in dataList" :key="item.personId" @click="personClick(item)">
                    <span class="item1">{{i+1}}</span>
                    <span class="item2 text-l">{{item.personName}}</span>
                    <span class="item2 text-l">{{item.currentCrew}}</span>
                    <span class="item3 text-r">{{item.birthday}}</span>
                </div>
            </vue-seamless-scroll>
        </div>
    </div>
</template>

<script>
    export default {
        name: "leftBottom",
        props: {
            dataList: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        components: {},
        data() {
            return { }
        },
        mounted() {
        },

        computed: {
            classOption () {
                return {
                    singleHeight: 36,
                    waitTime: 2000,
                    step: 1,
                    hoverStop: true
                }
            }
        },
        methods: {
            personClick(data){
                this.$emit('on-click', data)
            }
        }
    }
</script>

<style lang="scss" scoped>
.leftBottom {
    $box-width: 100%;
    $box-height: 610px;
    padding: 16px;
    height: $box-height;
    min-width: $box-width;
    border-radius: 5px;
    .bg-color-black {
        height: $box-height - 30px;
        border-radius: 10px;
    }
    .text {
        color: #c3cbde; font-size: 16px;
    }
    .dv-dec-3 {
        position: relative;
        width: 100px;
        height: 20px;
        top: -3px;
    }
    .scrollTit { display: grid; grid-template-columns: 50px 22% 30% 28%;
        background-color: rgb(0, 186, 255); height: 36px; line-height: 36px;
        margin-top: 10px;
        span{color: #fff; text-align: center; display: block}
        .text-l { text-align: left}
        .text-r { text-align: right}
    }
    .scrollList {
        display: grid; grid-template-columns: 50px 22% 30% 28%; height: 36px; line-height: 36px;
        background-color: rgb(10, 39, 50); cursor: pointer;
        span{color: #fff; text-align: center; display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-break: break-all;
        }
        .text-l { text-align: left}
        .text-r { text-align: right}
    }
    .scrollList:nth-child(2n){background-color: rgb(0, 59, 81);}
    .scrollContent {
        height: $box-height - 110px;;
        overflow: hidden;
    }
}
</style>
